<template>
  <v-dialog persistent width="550" content-class="rounded-0" v-model="reportSwitch">
    <v-card>
      <v-card-title>
        <v-spacer/>
        <h4>{{ title }}</h4>
        <v-spacer/>
      </v-card-title>
      <v-divider/>
      <v-container>
        <v-row class="align-center">
          <v-col cols="2" class="mb-2">举报理由</v-col>
          <v-col cols="10" class="mt-4 py-0">
            <v-select
                solo
                dense
                item-text="name"
                v-model="report.reason"
                label="请选择举报理由"
                :items="reportReason"
            />
          </v-col>
          <v-col cols="2">举报标签</v-col>
          <v-col cols="10">
            <v-chip-group multiple active-class="info" v-model="report.label">
              <v-chip
                  label
                  outlined
                  v-for="label in reportLabel"
                  :key="label.id"
              >
                {{ label.name }}
              </v-chip>
            </v-chip-group>
          </v-col>
          <v-col cols="12">举报详情</v-col>
          <v-col cols="12" class="pt-0">
           <v-textarea
               outlined
               no-resize
               counter="120"
               v-model="report.text"
           />
          </v-col>
          <v-container class="d-flex justify-end">
              <v-btn rounded dark small class="grey darken-1" width="100" @click="closeDialog">取消</v-btn>
              <v-btn rounded dark small class="red ml-2" width="100">举报</v-btn>
          </v-container>
        </v-row>
      </v-container>

    </v-card>
  </v-dialog>

</template>

<script>
import {mapState} from "vuex";

export default {
  name: "ReportDialog",
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      reportReason:  [],
      reportLabel: [],
      report: {
        reason: "",
        text: "",
        label: []
      }
    }
  },
  methods: {
    closeDialog() {
      this.$store.commit('blog/reportSwitch', false)
      this.report.reason = ''
      this.report.text = ''
      this.report.label = []
    }
  },
  computed: {
    ...mapState('blog', ['reportSwitch'])
  },
  created() {
    this.reportReason = [
      {id: 1, name: '色情低俗'},
      {id: 2, name: '政治敏感'},
      {id: 3, name: '造谣传谣'},
      {id: 4, name: '涉嫌欺诈'},
      {id: 5, name: '违法犯罪'}
    ]
    this.reportLabel = [
      {id: 1, name: '色情'},
      {id: 2, name: '低俗'},
      {id: 3, name: '引导私下交易'}
    ]
  }
}
</script>

<style scoped>

</style>
